<template>
    <view class="viewBox">
        <uni-nav-bar leftIcon="back" @clickLeft="back" :statusBar="true" shadow :fixed="true" :title="title" color="#101010"
            backgroundColor="#fff"></uni-nav-bar>
        <!-- <view class="sBox">
            <input type="text" v-model="taskName" placeholder="搜索任务" placeholder-style="color:#666" class="input" />
            <text class="search">搜索</text>
        </view> -->
        <!-- <tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change"></tui-tabs> -->
        <button v-if="userInfo.roleCode !== 'tzb'" :size="28" @click="add" class="add">新增</button>
        <!-- 网格员端 一周巡查 -->
        <view v-if="userInfo.roleCode == 'wgy' && type == 'yz'" style="margin: 30rpx 0 90rpx;">
            <view v-for="(item, index) in list" :key="index" class="listBox" @click="gotoDesc(item.id)">
                <view class="time">完成状态：<text :class="[item.status == 0 && 'red' || 'green']">{{ item.status == 0 &&
                    '未完成' || '已完成' }}</text></view>
                <view class="time">乡镇街道：{{ item.street }}</view>
                <view class="time">教别：{{ item.religion }}</view>
                <view class="time">场所名称：{{ item.place }}</view>
                <view class="time">巡查时间：{{ item.checkTime }}</view>
                <view class="time">巡查人员：{{ item.checkPerson }}</view>
                <view class="time">四进一提醒是否规范：{{ item.normFlag == 1 && '是' || '否' }}</view>
                <view class="time">是否有未成年人参加ZJ活动：{{ item.minorityFlag == 1 && '是' || '否' }}</view>
                <view class="time">是否有ZJ类非法出版物：{{ item.illegalFlag == 1 && '是' || '否' }}</view>
                <view class="time">是否发现其他问题：{{ item.otherFlag == 1 && '是' || '否' }}</view>
                <view class="time">情况反馈：{{ item.feedback }}</view>
            </view>
            <tui-divider>{{ list.length && (isLast && '已经到底了' || '上滑加载更多') || '暂无数据' }}</tui-divider>
        </view>
        <!-- 各单位端 专项巡查 -->
        <view v-else-if="userInfo.roleCode == 'gdw' && type == 'zx'" style="margin: 30rpx 0 90rpx;">
            <view v-for="(item, index) in list" :key="index" class="listBox" @click="gotoDesc(item.id)">
                <view class="time">完成状态：<text :class="[item.status == 0 && 'red' || 'green']">{{ item.status == 0 &&
                    '未完成' || '已完成' }}</text></view>
                <view class="time">排查对象：{{ item.place }}</view>
                <view class="time">排查时间：{{ item.checkTime }}</view>
                <view class="time">排查人员：{{ item.checkPerson }}</view>
                <view class="time">是否存在涉及ZJ内容：{{ item.contentFlag == 1 && '是' || '否' }}</view>
                <view class="time">是否建造ZJ造像和大型ZJ标识：{{ item.statueFlag == 1 && '是' || '否' }}</view>
                <view class="time">具体负责人是否存在信教情况：{{ item.responsibleBelieveFlag == 1 && '是' || '否' }}</view>
                <view class="time">工作人员是否存在信教情况：{{ item.workerBelieveFlag == 1 && '是' || '否' }}</view>
            </view>
            <tui-divider>{{ list.length && (isLast && '已经到底了' || '上滑加载更多') || '暂无数据' }}</tui-divider>
        </view>
        <!-- 各单位端/网格员端/统战部/tzwy 线索反馈 -->
        <view v-else-if="(userInfo.roleCode == 'tzb' || userInfo.roleCode == 'tzwy' || userInfo.roleCode == 'wgy' || userInfo.roleCode == 'gdw') && type == 'xs'"
            style="margin: 30rpx 0 90rpx;">
            <view v-for="(item, index) in list" :key="index" class="listBox" @click="gotoDesc(item.id)">
                <view class="time">完成状态：<text :class="[item.status == 0 && 'red' || 'green']">{{ item.status == 0 &&
                    '未完成' || '已完成' }}</text></view>
                <view class="time">乡镇街道：{{ item.town }}</view>
                <view class="time">村社区：{{ item.village }}</view>
                <view class="time">反馈人：{{ item.feedbackPerson }}</view>
                <view class="time">反馈时间：{{ item.feedbackTime }}</view>
                <view class="time">事发地点：{{ item.place }}</view>
                <view class="time">情况描述：{{ item.description }}</view>
            </view>
            <tui-divider>{{ list.length && (isLast && '已经到底了' || '上滑加载更多') || '暂无数据' }}</tui-divider>
        </view>
        <view v-else>未知</view>

        <!-- <view v-if="0" style="margin: 30rpx 0 90rpx;">
            <view v-for="(item, index) in list" :key="index" class="listBox" @click="gotoDesc(item.id)">
                <view class="listTitle">
                    <h3 class="title">{{street}}</h3>
                    <tui-tag type="danger" padding="10rpx 14rpx" size="26rpx">未完成</tui-tag>
                </view>
                <view class="time">事发时间：{{ item.checkTime }}</view>
            </view>
        </view> -->
        <!-- <tui-modal :show="true" custom>
            <view class="tui-modal-custom">
                <view style="padding: 2rem 0; text-align: center; font-size: 30rpx;">您有一条任务待接收，请及时查看</view>
                <tui-button height="80rpx" :size="28" @click="()=>{}">确定</tui-button>
            </view>
        </tui-modal> -->
        <!-- <tui-tabbar :tabBar="tabBar" :current="1" @click="tabbarSwitch" color="#9B9B9B" selectedColor="#3291F8"
            iconSize="48">
        </tui-tabbar> -->
    </view>
</template>

<script>
import {
    mapState,
    mapGetters,
    mapMutations
} from 'vuex'

export default {
    components: {},
    data() {
        return {
            title: '重点区域巡查反馈',
            type: '',
            isLast: true,
            page: 1,
            pages: 1,
            size: 10,
            list: [],
            taskName: '',
            currentTab: 0,
            tabs: [{
                name: "全部"
            }, {
                name: "已完成"
            }, {
                name: "未完成"
            }, {
                name: "待接收",
            }]
        }
    },
    computed: {
        ...mapGetters(['tabBar', "hasLogin"]),
        ...mapState(["isUserPhone", 'userInfo']),
    },
    onLoad(option) {
        // url: 'test?id=1&name=uniapp' option.id
        let type = option.type;
        this.type = type;
        if (this.userInfo.roleCode == 'wgy') {
            if (type == 'yz') this.title = '一周一巡查列表';
            if (type == 'xs') this.title = '重点区域巡查反馈';
        }
        if (this.userInfo.roleCode == 'gdw') {
            if (type == 'zx') this.title = '专项巡查列表';
            if (type == 'xs') this.title = '重点区域巡查反馈';
        }
        this.renderList();
    },
    onUnload() {

    },
    onShow() {
        this.renderList();
    },

    onReachBottom: function () {
        //触底开始下一页
        if (this.page == this.pages) return;
        if (this.page < this.pages) {
            this.page = this.page + 1;
            this.renderList();
        }
    },
    methods: {
        back() {
            uni.navigateBack({
                delta: 1
            })
        },
        /** 周列表 */
        weeklist() {
            let that = this;
            that.$api.showLoading();
            this.$apis.weekCheckList({
                current: that.page,
                size: 10
            }).then(res => {
                that.$api.hideLoading();
                let data = res.data;
                that.list = that.page == 1 && data.records || that.list.concat(data.records);
                that.pages = data.pages;
            })
        },
        /** 专项列表 */
        speclist() {
            let that = this;
            that.$api.showLoading();
            this.$apis.specialCheckList({
                current: this.page,
                size: 10
            }).then(res => {
                that.$api.hideLoading();
                let data = res.data;
                that.list = that.page == 1 && data.records || that.list.concat(data.records);
                that.pages = data.pages;
                if (data.current == data.pages) {
                    that.isLast = true;
                } else {
                    that.isLast = false;
                }
            })
        },
        /** 线索列表 */
        cluelist() {
            let that = this;
            that.$api.showLoading();
            this.$apis.clueList({
                current: this.page,
                size: 10
            }).then(res => {
                that.$api.hideLoading();
                let data = res.data;
                that.list =  that.page==1 && data.records || that.list.concat(data.records);
                that.pages = data.pages;
                if (data.current == data.pages) {
                    that.isLast = true;
                } else {
                    that.isLast = false;
                }
            })
        },
        renderList() {
            if (this.userInfo.roleCode == 'wgy' || this.userInfo.roleCode == 'tzb' || this.userInfo.roleCode == 'tzwy') {
                if (this.type == 'yz') this.weeklist();
                if (this.type == 'xs') this.cluelist();
            }
            if (this.userInfo.roleCode == 'gdw') {
                if (this.type == 'zx') this.speclist();
                if (this.type == 'xs') this.cluelist();
            }
        },
        add() {
            // 专项反馈 一周反馈
            let url = '/pages/userViews/submit';
            // 线索反馈
            if (this.type == 'xs') url = '/pages/userViews/feedback';
            uni.navigateTo({ url });
        },
        gotoDesc(id) {
            uni.navigateTo({
                url: `/pages/userViews/taskDesc?id=${id}&type=${this.type}`
            });
        },
        tabbarSwitch(e) {
            if (e.index == 1) return
            if (e.index == 0) {
                uni.switchTab({ url: '/pages/userViews/index' })
                // this.$Router.switchTab('tabBar-dataDisplay');
            } else if (e.index == 2) {
                this.$Router.switchTab('tabBar-user');
            }
        },
        //切换tab，逻辑请自行处理
        change(e) {
            this.currentTab = e.index
        }
    },
}
</script>

<style lang="scss">
page {
    background: #fff;
}

.add {
    margin: 1rem auto 0;
    background: #1c54f4;
    color: #fff;
    font-size: 28rpx;
    width: 300rpx;
}

.sBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 40rpx 0;
}

.input {
    display: inline-block;
    border: 1px solid #999;
    color: #333;
    height: 85rpx;
    width: 80%;
    border-radius: 42rpx;
    padding: 0 40rpx;
}

.search {
    font-size: 35rpx;
}

.tip {
    font-size: 30rpx;
    font-weight: bold;
    margin: 20rpx 0;
}

.listBox {
    width: 90%;
    background: #fff;
    margin: 0 auto 2rem;
    border: 1px solid #999;
    padding: 20rpx;
    border-radius: 10rpx;
    box-shadow: 1px 1px 3px #333;
}

.listTitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .title {
        font-size: 36rpx;
        font-weight: bold;
    }
}

.time {
    color: #333;
    padding: 20rpx 0;
}

.red {
    color: #fff;
    background: red;
    padding: 4rpx 6rpx;
    border-radius: 6rpx;
}

.green {
    color: #fff;
    background: green;
    padding: 4rpx 6rpx;
    border-radius: 6rpx;
}</style>